<template>
  <div class="cart-item card p-4">
    <div class="flex items-center space-x-4">
      <!-- 选择框 -->
      <input
        :checked="selected"
        type="checkbox"
        @change="$emit('update:selected', !selected)"
      />
      
      <!-- 商品图片 -->
      <NuxtLink :to="`/products/${item.product.id}`" class="flex-shrink-0">
        <NuxtImg
          :src="item.product.cover"
          :alt="item.product.title"
          class="w-24 h-24 object-cover rounded"
        />
      </NuxtLink>
      
      <!-- 商品信息 -->
      <div class="flex-1 min-w-0">
        <NuxtLink
          :to="`/products/${item.product.id}`"
          class="text-lg font-medium hover:text-primary-600 line-clamp-1"
        >
          {{ item.product.title }}
        </NuxtLink>
        
        <div class="flex flex-wrap gap-2 mt-2">
          <Tag v-for="tech in item.product.tech.slice(0, 3)" :key="tech" size="sm">
            {{ tech }}
          </Tag>
        </div>
        
        <div class="mt-2 text-sm text-gray-500">
          分类：{{ item.product.category }}
        </div>
      </div>
      
      <!-- 价格和数量 -->
      <div class="flex items-center space-x-8">
        <!-- 单价 -->
        <div class="text-right">
          <div class="text-lg font-bold text-primary-600">
            ¥{{ item.product.price }}
          </div>
          <div v-if="item.product.originalPrice" class="text-sm text-gray-400 line-through">
            ¥{{ item.product.originalPrice }}
          </div>
        </div>
        
        <!-- 数量 -->
        <div class="flex items-center space-x-2 border rounded">
          <button
            class="w-8 h-8 hover:bg-gray-100"
            :disabled="item.quantity <= 1"
            @click="$emit('update-quantity', item.product.id, item.quantity - 1)"
          >
            <div class="i-mdi-minus" />
          </button>
          <input
            :value="item.quantity"
            type="number"
            class="w-12 text-center border-x"
            min="1"
            @change="handleQuantityChange"
          />
          <button
            class="w-8 h-8 hover:bg-gray-100"
            @click="$emit('update-quantity', item.product.id, item.quantity + 1)"
          >
            <div class="i-mdi-plus" />
          </button>
        </div>
        
        <!-- 小计 -->
        <div class="text-lg font-bold text-right min-w-[100px]">
          ¥{{ (item.product.price * item.quantity).toFixed(2) }}
        </div>
        
        <!-- 删除按钮 -->
        <button
          class="p-2 hover:bg-red-50 rounded text-red-600"
          @click="$emit('remove', item.product.id)"
        >
          <div class="i-mdi-delete text-xl" />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CartItem } from '~/stores/cart'

interface Props {
  item: CartItem
  selected: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['update:selected', 'update-quantity', 'remove'])

function handleQuantityChange(e: Event) {
  const target = e.target as HTMLInputElement
  const quantity = Math.max(1, parseInt(target.value) || 1)
  emit('update-quantity', props.item.product.id, quantity)
}
</script>